<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="hello">
        <!-- 当方法不需要传入参数的时候，有没有加小括号都是一样的 -->
        <button @click='btn1Click(123)'>btn1</button>
        <button @click='btn1Click'>btn1</button>
        <button @click='btn1Click()'>btn1</button>
        
        <!-- 当方法需要传入参数的时候，小括号调用方法的时候会传入undefined -->
        <button @click='btn2Click()'>btn2加了括号 </button>
        <button @click='btn2Click(123)'>btn2正常一个参数</button>
        <button @click='btn2Click(123,456)'>btn2多个参数</button>
        <!--没有用小括号传入参数的话，vue会默认将浏览器产生的event对象传入到方法  -->
        <button @click='btn2Click'>btn2没加括号</button>

        <!-- 手动获取浏览器参数的event对象 :$event -->
        <button @click='btn3Click(123,$event)'>btn4</button>

    </div>
    <script src="../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            data: {
                message: 'hello vuejs',
            },
            methods: {
                btn1Click() {
                    console.log('没有参数的情况下，有没有加括号都是一样的');
                },
                btn2Click(abc) {
                    console.log(abc)},
                btn3Click(abc,event){
                  console.log(abc + '---'+event); 
                }
                
            },
        })
    </script>
</body>

</html>